import React from 'react';
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
} from 'react-native';
import { scaleSize } from '../../utils/screen';
import FontText from './FontText';

const BOX_BORDER_WIDTH = scaleSize(1);

class SeatBox extends React.Component {
  constructor(props) {
    super(props);

    const { defaultValue } = props;

    this.state = {
      selected: !!defaultValue,
    }
  }

  _changeSelection() {
    const newSelected = !this.state.selected;
    this.setState({
      selected: newSelected,
    });

    const { onSelectionChange } = this.props;
    onSelectionChange && onSelectionChange(newSelected);
  }

  render() {
    const { selected } = this.state;
    const { label, size, style, selectedStyle, editable } = this.props;
    const boxSize = size - 2 * BOX_BORDER_WIDTH;

    const defaultStyle = styles.box;
    const dynamicBoxStyle = {
      width: boxSize,
      height: boxSize,
      borderWidth: BOX_BORDER_WIDTH,
    };
    const finalStyle = [
      defaultStyle,
      style,
      dynamicBoxStyle,
      selected ? selectedStyle : {},
    ];

    let RootView = TouchableWithoutFeedback;
    if (editable === false) {
      RootView = View;
    }

    return (
      <RootView
        onPress={() => this._changeSelection()}
        disable={!editable}
      >
        <View
          style={finalStyle}
        >
          <FontText
            font={'medium'}
            style={styles.labelText}
          >
            {label}
          </FontText>
        </View>
      </RootView>
    );
  }
};

/* StyleSheet =============================================================== */

const styles = StyleSheet.create({
  box: {
    backgroundColor: 'rgb(45,52,71)',
    borderColor: 'rgb(53,61,82)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  labelText: {
    color: '#fff',
    fontSize: scaleSize(30),
  }
});

export default SeatBox;
